<template>
  <div>
    <!--查询条件区域-->
    <div class="table-page-search-wrapper">
      <p-form layout="inline" @keyup.enter.native="searchQuery">
        <p-row :gutter="24">
          <p-col :xl="6" :lg="8">
            <p-form-item label="程序编码">
              <p-input placeholder="请输入程序编码" v-model.trim="queryParam.procedureCode"></p-input>
            </p-form-item>
          </p-col>
          <p-col :xl="6" :lg="8">
            <p-form-item label="程序名称">
              <p-input placeholder="请输入程序名称" v-model.trim="queryParam.procedureName"></p-input>
            </p-form-item>
          </p-col>
          <p-col :xl="6" :lg="8">
            <p-button type="primary" @click="searchQuery" icon="search">查询</p-button>
            <p-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</p-button>
          </p-col>
        </p-row>
      </p-form>
    </div>
    <!--工序BOM表格-->
    <p-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="options"
      :pagination="false">
    </p-table>
  </div>
</template>

<script>
// import mixins from './mixins'
import { postAction } from '@/api/manage'

export default {
  // mixins: [mixins],
  props: {
    options: {
      type: Array,
      default: []
    },
  },
  data() {
    return {
      loading: false,
      queryParam: {
        procedureCode: '',
        procedureName: ''
      },
      //列定义
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key:'rowIndex',
          width: 60,
          align: 'center',
          customRender(t,r,index) {
            return index + 1;
          }
        },
        {
          title: '程序编码',
          align: 'center',
          dataIndex: 'procedureCode',
        },
        {
          title: '程序名称',
          align: 'center',
          dataIndex: 'procedureName',
        },
        {
          title: '程序版本',
          align: 'center',
          dataIndex: 'procedureVersion',
        },
        {
          title: '程序类型',
          align: 'center',
          dataIndex: 'procedureType',
        }
      ],
      // options: [],
    }
  },
  mounted(){
    this.optionsCopy = _.cloneDeep(this.options);
  },
  methods: {
    searchQuery() {
      this.options = this.optionsCopy.filter( el =>{
        const procedureCode = this.queryParam.procedureCode || el.procedureCode || '';
        const procedureName = this.queryParam.procedureName || el.procedureName || '';
        return (el.procedureCode || '').includes(procedureCode) && (el.procedureName || '').includes(procedureName);
      });
    },
    searchReset() {
      this.queryParam.procedureCode = '';
      this.queryParam.procedureName = '';
      this.options = _.cloneDeep(this.optionsCopy);
    },
  /* loadData(params) {
      this.loading = true
      postAction('/mes-craft/craft/mesPeProcessRoute/queryProcedureByMainId', params).then((res) => {
        if (res.success) {
          this.dataSource = res.data
          this.options = this.dataSource
        }
        if (res.code === 510) {
          this.$message.warning(res.msg)
        }
        this.loading = false
      })
    }, */
  }
}
</script>
